import React, { Component } from 'react'
import { Row, Col, Input, Button } from 'antd'
import './AddFillInBlank.less'

const { TextArea } = Input
class Index extends Component {

    constructor(props) {
        super(props)
        this.state = {
            id: '',
            questionContext: '',
            trueAnswer: []
        }
    }

    componentDidMount() {
        const { id, questionContext, trueAnswer } = this.props.question
        this.setState({ id, questionContext, trueAnswer })
    }

    render() {
        const { questionContext, trueAnswer, id } = this.state
        const { save } = this.props

        return <div className='add-fill-in-blank'>
            <Row className='row'>
                <Col className='label'>
                    <span>题目：</span></Col>
                <Col span={20}>
                    <TextArea
                        id={id}
                        value={questionContext}
                        onChange={(e) => {
                            const length = e.target.value.split("[____]").length - 1
                            let nextTrueAnswer = undefined
                            if (trueAnswer instanceof Array) {
                                nextTrueAnswer = [...trueAnswer]
                            } else {
                                nextTrueAnswer = []
                            }
                            while (nextTrueAnswer.length < length) {
                                nextTrueAnswer.push("")
                            }
                            if (nextTrueAnswer.length > length) {
                                nextTrueAnswer = nextTrueAnswer.slice?.(0, length)
                            }
                            this.setState({
                                questionContext: e.target.value,
                                trueAnswer: nextTrueAnswer
                            }, () => {
                                save(this.state)
                            })
                        }}
                        row={2}
                        placeholder='例:1吨=[____]千克，1千克=[____]克。“[____]”代表可填写区域' />
                </Col>
            </Row>
            <Row>
                <Col className='label'>
                    <span>正确答案：</span>
                </Col>
                <Col span={20}>
                    {(() => {
                        const length = questionContext.split("[____]").length - 1
                        const answerEleList = []
                        for (let index = 0; index < length; index += 1) {
                            answerEleList.push(<Input
                                key={index}
                                value={this.state.trueAnswer?.[index]}
                                className='true-answer-input'
                                onChange={(e) => {
                                    let nextTrueAnswer = JSON.parse(JSON.stringify({ data: this.state.trueAnswer })).data
                                    if (!(nextTrueAnswer instanceof Array)) {
                                        nextTrueAnswer = []
                                    }
                                    nextTrueAnswer[index] = e.target.value
                                    this.setState({
                                        trueAnswer: nextTrueAnswer
                                    }, () => {
                                        save(this.state)
                                    })
                                }} />)
                        }
                        return answerEleList
                    })()}
                </Col>
            </Row>

        </div>
    }
}

export default Index